/*
 *分享页文件
 */
'use strict';
import React, { Component } from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux';
import { Row, Col, Card, Icon, Table, Select} from 'antd';
import { formatTime } from '@app/constants/CommonFn.jsx';
import TimeDom from './TimeDom.jsx';
import {analysisJson, regionArray, endexData} from '@app/constants/DataSource.jsx';
import './weather.css';
import './Analysis.css';
const ReactHighcharts = require('react-highcharts');
const Option = Select.Option;

class Analysis extends Component {
	constructor(props) {
  	super(props);
		this.state = {
      loading:true,
      replace:false,
      regionValue:1
    };
  }

  componentDidMount(){
    setTimeout(() => {
      this.setState({loading:false});
    },300);
  }

	handleChange = (value) => {
		this.setState({replace:false});
		analysisJson.region = value;
	}

  formChart = (option) => {
  	let config = {
  		chart: {
        type: option.type,
        height:423      
      },
      title: {
        text: option.title,
        style:{'fontSize': '16px'}
      },
      xAxis: option.xAxis,
      yAxis: {
        min: 0,
        max:100,
        title: {
          text: null
        }
      },
      legend:option.legend,
      plotOptions: {
        bar: {
          dataLabels: {
          	allowOverlap: true,
            enabled: true, //禁用数据名称
          }
        }
      },
      exporting:{
        enabled:false
      },
      credits:{
        enabled: false // 禁用版权信息
      },
      series: option.series
		};
		return config;
  }
	
	render() {
		let config1 = this.formChart({
			title:'环境指数评分详情(每天12点更新)',
			series:[{
				name:'分值',
	  		data: [
	        {name:'空气',y: endexData[analysisJson.region].a,color: '#008CFF'},
	        {name:'污染',y: endexData[analysisJson.region].b,color:'#008CFF'},
	        {name:'水质',y: endexData[analysisJson.region].c,color:'#008CFF'},
	        {name:'土质',y: endexData[analysisJson.region].d,color:'#008CFF'},
	      ]
 			}],
      type:'bar',
      xAxis:{
        categories: ['空气', '污染', '水质', '土质'],
        title: {
          text: null
        }
	    },
	    legend:{
	    	enabled:false
	    }
    });
    let config2 = this.formChart({
    	title:'历史环境指数评分(每月1号更新)',
    	series:[{
    		name:'分值',
  			data: endexData[analysisJson.region].score,
  			color:'#008CFF'
  		},{
  			name:'平均分值',
				data: [89,90,89,86,86,88,92,91,86,85,84,90],
				color:'#00FF00'
			}],
      type:'',
      xAxis:{
      	max:12,
      	min:1,
      	maxPadding:1
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    	}
    });

    const columns = [{
		  title: '排名',
		  dataIndex: 'key',
		}, {
		  title: '编号',
		  dataIndex: 'ranksId',
		}, {
		  title: '地区',
		  dataIndex: 'name',
		}, {
		  title: '指数',
		  dataIndex: 'fraction',
		}];
		const data = [...endexData];
		for(let i=6;i<22;i++){
			data.push({key:i,name:'暂无',fraction:0});
		}

  	return (
    	<div className = 'analysis'>
				<Row gutter = {16} >
					<Col span = {12}>
						<Card title='今日天气' style={{ width:'100%',height:208,background:'linear-gradient(to right, #00BBFF ,#fff 80%)'}} loading = {this.state.loading}>
							<div className={analysisJson.weather.weather}></div>
							<Row style ={{paddingLeft:150,paddingTop:20}} className = 'h1'>
								<Col span = {12}>
									<p>{analysisJson.weather.title}</p>
									<p>{analysisJson.weather.temperature}</p>
									<p>{analysisJson.weather.windPower}风</p>
								</Col>
								<Col span = {12}>
									<p>AQI:{analysisJson.weather.AQI}</p>
									<p>空气湿度:{analysisJson.weather.humidity}%</p>
									<p></p>
								</Col>
							</Row>
					  </Card>
					</Col>
					<Col span = {6} >
						<Card  title='时间' style={{ width:'100%',height:208}} loading = {this.state.loading}>
							<TimeDom />
					  </Card>
					</Col>
					<Col span = {6}>
						<Card  title='地区' extra={<a onClick = {() => {this.setState({replace:true})}} >更换</a>} style={{ width:'100%',height:208}} loading = {this.state.loading}>
					    <p>中国</p><p>浙江省</p>
					    <p>杭州市上城区</p>
					    <div style = {{fontSize:18,color:'#F5222D'}}>
					    	{this.state.replace ? 
					    		<Select
								    defaultValue={analysisJson.region}
								    style={{ width: 200 }}
								    onChange={this.handleChange}
								  >
								  {regionArray.map((i,item) =>{
								  	return (<Option key = {'region'+item} value={item}>{i}</Option>)
								  })}
								  </Select> : <span><Icon type='environment' />{regionArray[analysisJson.region]}</span>
								}</div>
					  </Card>
					</Col>
				</Row>
				<Row gutter = {16} >
					<Col span = {24}>
						<Card title='环境指数' style={{ width:'100%'}} >
							<Col span = {10} >
								<div style = {{width:'100%'}}><span className = 'endex'>{endexData[analysisJson.region].fraction}</span><span>排名:{endexData[analysisJson.region].key}</span>
									<p style = {{display:'inline-block',width:'100%',textAlign:'right',fontSize:12,paddingRight:20}}><Link to = '/Rankings'>更多</Link></p></div>
								<Table loading = {this.state.loading} columns={columns} dataSource={data} pagination={{ pageSize: 5 }} size='middle' style = {{height:233}}/>
							</Col>
							<Col span = {14}>
								<ReactHighcharts config={config1} />
							</Col>
					  </Card>
				  </Col>
				</Row>
				<Row gutter = {16} style = {{marginBottom:60}}>
					<Col span = {24}>
						<Card style={{ width:'100%'}}>
							<Col span = {24}>
								<ReactHighcharts config={config2}/>
							</Col>
					  </Card>
				  </Col>
				</Row>
    	</div>
		);
	}
}

function mapStateToProps(state) {
  return {

  }
}

export default connect(
  mapStateToProps,
  {

	}
)(Analysis)